<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 10px">
      <el-row>
        <el-input
          style="width: 30%"
          v-model="params.query"
          clearable
          @clear="getUsers"
        >
          <template #append>
            <el-button icon="el-icon-search" @click="getUsers"></el-button>
          </template>
        </el-input>
        <el-button
          type="primary"
          style="margin-left: 1%"
          @click="showDialog = true"
          >添加用户</el-button
        >
      </el-row>
      <el-table :data="list" border style="margin-top: 20px">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态" prop="mg_state" width="150px">
          <template #default="{ row }">
            <el-switch v-model="row.mg_state" @change="changeState(row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editUser(row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="delUser(row.id)"
            ></el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-setting"
              @click="assignRoles(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="params.total"
          :current-page="params.pagenum"
          :page-size="params.pagesize"
          :page-sizes="[5, 10, 15, 20]"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <AddOrEditUser :showDialog.sync="showDialog" ref="AddOrEditUser" />
    <AssignRoles :showAssign.sync="showAssign" ref="AssignRoles" />
  </div>
</template>

<script>
import AddOrEditUser from './addOrEditUser.vue'
import AssignRoles from './assignRoles.vue'
import { users, editState, delUser } from '@/api/users'
export default {
  components: {
    AddOrEditUser,
    AssignRoles
  },
  data () {
    return {
      list: [],
      params: {
        query: '',
        pagesize: 10,
        pagenum: 1,
        total: 0
      },
      showDialog: false,
      showAssign: false
    }
  },
  created () {
    this.getUsers()
  },
  methods: {
    async getUsers () {
      const res = await users(this.params)
      this.params.total = res.total
      this.list = res.users
    },
    handleSizeChange (newSize) {
      this.params.pagesize = newSize
      this.getUsers()
    },
    handleCurrentChange (newPage) {
      this.params.pagenum = newPage
      this.getUsers()
    },
    async changeState (row) {
      try {
        await editState(row)
        this.$message.success('更新用户状态成功')
      } catch (err) {
        console.log(err)
      }
    },
    async delUser (id) {
      try {
        await this.$confirm('此操作将永久删除该用户, 是否继续?', {
          title: '删除用户',
          type: 'warning'
        })
        await delUser(id)
        this.$message.success('删除成功')
        this.getUsers()
      } catch (err) {
        console.log(err)
      }
    },
    editUser (row) {
      this.$refs.AddOrEditUser.form = JSON.parse(JSON.stringify(row))
      this.showDialog = true
    },
    assignRoles (row) {
      this.$refs.AssignRoles.user = row
      this.showAssign = true
    }
  }
}
</script>

<style>
</style>
